<template>

  <div class="digitalScroll-title">
    <h3>Brand Advantage</h3>
    <p>A man of strength to rely on</p>
  </div>

  <div class="digialScroll-picture">
    <ul>
      <li><el-icon><Location /></el-icon></li>
      <li><el-icon><GoldMedal /></el-icon></li>
      <li><el-icon><PhoneFilled /></el-icon></li>
      <li><el-icon><Pouring /></el-icon></li>
    </ul>
  </div>

  <div class="digitalScroll-item">
    <ul v-if="aountData.length > 0">
      <li v-for="(itme, indx) in aountData" :key="indx">
        <span><CountTo :startVal="start" :endVal="itme.aomunt" :duration="7000" :useEasing="true" class="CountTo_num"></CountTo>{{ itme.type }}</span>
        <h3>{{ itme.title }}</h3>
        <div class="digitalScroll-item-context">
          <p>{{ itme.context }}</p>
        </div>
      </li>
    </ul>
  </div>



</template>


<script>
import { ref, toRefs,reactive,onMounted } from 'vue';
import axios from 'axios'
import {CountTo} from 'vue3-count-to'

  export default {
    name: "DigitalScroll",
    setup(){
      const data = reactive({
        num: ref(20),
        start : ref(0),
        end : ref(1000),
        aountData: [{}],
      })


      const getAount = async () =>{
        const response = await axios.get(
          'api/getAount/',
          {
            headers: {
              "Content-Type": "application/json;charset=utf-8",
              'X-Requested-With': 'XMLHttpRequest',
              'Access-Control-Allow-Origin': '*'
            }
          }
        )
        data.aountData = response.data.title
      }

      onMounted(() => {
        getAount()
      })


      return{
        ...toRefs(data),
        getAount
      }
    },

    components: {
      CountTo
    }
  }

</script>


<style>
 .digitalScroll-title {
    position: relative;
    margin-top: 100px !important;
    margin-bottom: 70px;
    line-height: 40px;
  }

  .digitalScroll-title h3 {
    font-size: 30px;

  }

  .digitalScroll-title p {
    font-size: 20px;
  }

  .digitalScroll-item ul,
  .digialScroll-picture ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
  }

  .digialScroll-picture ul li i:nth-child(1){
    margin-right: 60px;
  }

  .digialScroll-picture ul li i:hover {
    animation: bounce 1s ease;
  }

  /* icon动画效果 */
  @keyframes bounce {
    0% {
      transform: rotate(40deg);
    }
    20% {
      transform: rotate(-40deg);
    }
    40% {
      transform: rotate(30deg);
    }

    60% {
      transform: rotate(-20deg);
    }

    80% {
      transform: rotate(10deg);
    }


    100% {
      transform: rotate(0deg);
    }

  }

  .CountTo_num {
    font-size: 30px;
    color: rgb(179, 64, 64);
    font-weight:bolder;
    margin-right: 10px;
  }

  .digitalScroll-item ul li,
  .digialScroll-picture ul li {
    list-style: none;
  }

  .digialScroll-picture ul li {
    font-size: 80px;
  }

  .digitalScroll-item p {
    width: 96%;
    text-align: left;

  }


  .digitalScroll-item-context {
    width: auto;
    margin-left: 70px;
    margin-top: 40px;
  }


</style>